/* ==========================================================================
   BADGES
   ========================================================================== */

.badge {
    @apply text-3xs not-italic bg-gray-300 dark:bg-dark-700 text-gray-800 dark:text-dark-150 rounded-md leading-normal;
    padding: 1px 5px 0;
}

.badge-pill {
    @apply bg-gray-300 dark:bg-dark-700 px-2 py-1 rounded;
}

.badge-pill-sm {
    @apply bg-gray-300 dark:bg-dark-700 px-1 py-px rounded;
}

.badge-sm {
    @apply bg-gray-300 dark:bg-dark-700 uppercase text-4xs text-white dark:text-dark-100 rounded-sm leading-normal;
    height: 16px;
    padding: 1px 5px 2px;
}

.filter-badge {
    @apply text-2xs text-gray-800 dark:text-dark-150 bg-white dark:bg-dark-550 border border-dashed border-gray-600 dark:border-dark-900 flex items-center rounded-full;
    height: 1.625rem;
    padding-left: 10px ; [dir="rtl"] & { padding-right: 10px ; padding-left: 0 ; }

    button {
        @apply px-2 text-base text-gray-600 dark:text-dark-175 flex items-center rounded;

        &:hover {
            @apply text-gray-800 dark:text-dark-100;
        }

        &:focus {
            @apply focus-outline;
        }
    }

    &.filter-badge-control {
        @apply bg-gray-100 dark:bg-dark-600 border border-solid rounded-full border-gray-500 dark:border-dark-900 hover:border-gray-600 dark:hover:border-dark-800 hover:bg-gray-200 dark:hover:bg-dark-800;
    }
}
